<script setup lang="ts">
import { useContextMenuStore } from '@/stores'
import  { useContextMenu as baseContextMenu  } from '@/composables'
import { watch,ref } from 'vue'
import Header from '@/components/Screen/Header.vue'
import { ArrowDown } from '@element-plus/icons-vue'
const  { ContextMenuBase, base ,open ,close } = baseContextMenu()
const contextMenu = useContextMenuStore()

const baseRef = ref<HTMLElement | null>(null)

// function handleClickOutSide(e:any)
// {
//   if(baseRef.value)
//   {
//     if(!baseRef.value.contains(e.target)){
//       contextMenu.appContextMenuShown = false
//       document.removeEventListener('click',handleClickOutSide)
//     }
//   }
// }

// watch(()=>contextMenu.appContextMenuShown ,(newValue) => {
//   if (newValue)
//   {
//     setTimeout(() => {
//       // 添加点击事件的监听器
//       document.addEventListener('click', handleClickOutSide);
//     }, 20);
//   }
// })

// const handelDialogDisplay = () => {
//   contextMenu.appContextMenuShown.value = false
// }

</script>

<template>
  <ContextMenuBase ref="baseRef" :show="contextMenu.appContextMenuShown" >
    <div class="content-menu">
      <ul>
        <li><a>播放</a></li>
        <li><a>下一首播放</a></li>
        <li><a>播放相似单曲</a></li>
        <li><a>播放MV</a></li>
      </ul>
      <hr />
      <ul>
        <li><a>我喜欢</a></li>
        <li><el-dropdown :hide-on-click="false" placement="top-start">
    <a class="el-dropdown-link">
      添加到
    </a>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
              <el-dropdown-item divided>Action 6</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown></li>
        <li><a>移动到</a></li>
        <li><a>下载</a></li>
        <li><a>单曲购买</a></li>
        <li><a>分享</a></li>
        <li><a>查看评论</a></li>
        <li><a>智能曲谱</a></li>
      </ul>
      <hr />
      <ul>
        <li><a>删除</a></li>
      </ul>
    </div>
  </ContextMenuBase>

</template>

<style scoped lang="scss">
.content-menu{
  position: fixed;
  width: 150px;
  //height: 100px;
  background-color: white;
  padding: 8px 5px;
  border-radius: 15px;
  box-shadow: #7c7c7c 1px 1px;


  ul{
    padding: 0;
  }

  hr{
    margin: 10px 0;
  }

  li a {
    display: inline-block;
    text-align: left;
    padding: 0 10px;
    width: 100%;
    height: 30px;
    &:hover{
      background-color: #9a8c89;
    }
  }

}
</style>